<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入jQuery框架--%>
    <script src="/static/js/jquery.min.js"></script>
    <script>
        // 页面加载完成事件
        jQuery(function ($) {
            $("#getUserBtn").click(function () {
                // 发送ajax请求获取数据
                $.ajax({
                    url: "/test/test14.json",
                    success(data) { // 成功时执行的函数，data是后端返回的数据
                        console.log(data);
                    }
                })
            })

            $("#saveBtn").click(function () {
                $.ajax({
                    url: "/test/save.do",
                    type: "post", // 请求方式
                    data: {
                        username: "zhangsan",
                        password: "123",
                        age: 20
                    },
                    success: function (data) {
                        alert(data);
                    }
                })
            })

            $("#saveBtn2").click(function () {
                var user = {
                    username: "zhangsan",
                    password: "123",
                    age: 20
                };
                // '{"username":"zhangsan","password":"123","age":20}'
                var userJson = JSON.stringify(user);

                $.ajax({
                    url: "/test/save2.do",
                    type: "post", // 请求方式
                    data: userJson,
                    contentType: "application/json", // 发送的数据类型
                    success: function (data) {
                        alert(data);
                    }
                })
            })

            $("#saveBtn3").click(function () {
                var users = [
                    { username: "zhangsan",  password: "123", age: 20 },
                    { username: "lisi",  password: "123", age: 20 },
                    { username: "wangwu",  password: "123", age: 20 }
                ];

                // '{"username":"zhangsan","password":"123","age":20}'
                var userJson = JSON.stringify(users);

                $.ajax({
                    url: "/test/save3.do",
                    type: "post", // 请求方式
                    data: userJson,
                    contentType: "application/json", // 发送的数据类型
                    success: function (data) {
                        alert(data);
                    }
                })
            })
        })
    </script>
</head>
<body>

    <input id="getUserBtn" type="button" value="查询用户" />
    <input id="saveBtn" type="button" value="保存数据" />
    <input id="saveBtn2" type="button" value="保存数据（以json格式发送）" />
    <input id="saveBtn3" type="button" value="保存集合数据（以json格式发送）" />
</body>
</html>
